<template>
  <div class="ball">
    <ul class="list" :style="{width: `${width}px`}">
      <li v-for="ball in ballList" :key="ball.id" @click="toPath(ball)">
        <van-icon class="ball-icon" :name="ball.iconUrl" />
        <div class="ball-title">{{ball.name}}</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { dragonBall } from '@/services/homepage'
import { useRouter } from 'vue-router'



// 推荐滚动区
const useBall = ()=> {
  const ballList = ref([])
  dragonBall().then(res=>{
    ballList.value = res.data.data
  })
  const width = computed(()=>{
    const len = ballList.value.length
    if(len===0) return 0
    return len * 60 + (len-1) * 15 + 30
  })
  const router = useRouter()
  const toPath = (ball:any)=>{
    const { data } = ball.url.match(/.+:\/\/(?<data>.+$)/).groups
    const [ name, params ] = data.split('?')
    router.push({
      name,
      params
    })
  }
  return {
    toPath,
    width,
    ballList
  }
}

export default defineComponent({
  name: 'HomeTop',
  setup() {
    return {
      ...useBall()
    }
  },
})
</script>

<style lang="scss" scoped>
.ball{
  margin-top: 15px;
  overflow: auto;
  .list{
    display: flex;
    font-size: 12px;
    text-align: center;
    padding: 0 15px;
    li{
      .ball-icon{
        display: inline-block;
        width: 40px;
        height: 40px;
        font-size: 40px;
        background-color: rgb(206, 97, 97);
        border-radius: 50%;
      }
      .ball-title{
        width: 60px;
      }
      &+li{
        margin-left: 15px;
      }
    }
  }
}
</style>
